<template>
  <q-page class="register-page flex flex-center">
    <div class="register-container">
      <q-card class="register-card">
        <q-card-section class="text-center">
          <div class="logo-section q-mb-lg">
            <div class="text-h5 text-weight-bold">大学择校系统</div>
            <div class="text-subtitle1">College Finder System</div>
          </div>
          
          <div class="text-h6 q-mb-md">用户注册</div>
        </q-card-section>

        <q-card-section>
          <q-form @submit="onSubmit" class="q-gutter-md">
            <q-input
              filled
              v-model="registerForm.username"
              label="用户名"
              lazy-rules
              :rules="[
                val => val && val.length > 0 || '请输入用户名',
                val => val.length >= 3 || '用户名长度至少3位'
              ]"
              rounded
            />

            <q-input
              filled
              v-model="registerForm.email"
              label="邮箱"
              type="email"
              lazy-rules
              :rules="[
                val => val && val.length > 0 || '请输入邮箱',
                val => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val) || '请输入有效的邮箱地址'
              ]"
              rounded
            />

            <q-input
              filled
              type="password"
              v-model="registerForm.password"
              label="密码"
              lazy-rules
              :rules="[
                val => val && val.length > 0 || '请输入密码',
                val => val.length >= 6 || '密码长度至少6位'
              ]"
              rounded
            />

            <q-input
              filled
              type="password"
              v-model="registerForm.confirmPassword"
              label="确认密码"
              lazy-rules
              :rules="[
                val => val && val.length > 0 || '请再次输入密码',
                val => val === registerForm.password || '两次输入的密码不一致'
              ]"
              rounded
            />

            <div class="agreement-section">
              <q-checkbox 
                v-model="agreeToTerms" 
                dense
              >
                <template v-slot:label>
                  <div>
                    我已阅读并同意
                    <a href="#" class="text-primary">用户协议</a> 和 
                    <a href="#" class="text-primary">隐私政策</a>
                  </div>
                </template>
              </q-checkbox>
            </div>

            <div class="q-pt-lg">
              <q-btn 
                type="submit" 
                color="primary" 
                label="注册" 
                class="full-width"
                rounded
                unelevated
                :disable="!agreeToTerms"
              />
            </div>
          </q-form>
        </q-card-section>

        <q-card-section class="text-center">
          <div class="q-mt-md">
            已有账户? 
            <q-btn flat color="primary" to="/login" label="立即登录" />
          </div>
        </q-card-section>
      </q-card>
    </div>
  </q-page>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const registerForm = ref({
  username: '',
  email: '',
  password: '',
  confirmPassword: ''
})

const agreeToTerms = ref(false)

function onSubmit() {
  // 在实际应用中，这里会发送注册请求
  console.log('注册信息:', registerForm.value)
  
  // 模拟注册成功，跳转到登录页
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.register-page {
  background: linear-gradient(135deg, #00695C 0%, #0097A7 100%);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
      radial-gradient(circle at 10% 20%, rgba(41, 182, 246, 0.1) 0%, transparent 15%),
      radial-gradient(circle at 90% 80%, rgba(33, 150, 243, 0.1) 0%, transparent 15%),
      radial-gradient(circle at 50% 50%, rgba(3, 169, 244, 0.1) 0%, transparent 20%);
    background-size: 500px 500px;
    opacity: 0.5;
  }
  
  .register-container {
    width: 100%;
    max-width: 450px;
    padding: 20px;
    position: relative;
    z-index: 1;
    
    .register-card {
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0,0,0,0.2);
      
      .logo-section {
        .text-h5 {
          color: var(--q-primary);
        }
      }
    }
  }
  
  .agreement-section {
    :deep(.q-checkbox__label) {
      font-size: 0.85rem;
      
      a {
        text-decoration: none;
        font-weight: 500;
        
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}
</style>